
<form style="margin-top: 50%" nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
  <div class="bby-logo-wrapper">
    <div class="bby-logo">
        <span class="logo-bby">
          <img src="assets/img/logo.png" alt="Logo"/>
        </span>
      <span class="logo-text">bby共享云</span>
    </div>
  </div>
  <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>

  <nz-form-item>
    <nz-form-control [nzErrorTip]="userErrorTip">
      <nz-input-group nzSize="large" nzPrefixIcon="user">
        <input nz-input formControlName="username" placeholder="User" (focusout)="checkUsername()"/>
      </nz-input-group>
      <ng-template #userErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">请输入用户名！</ng-container>
        <ng-container *ngIf="i.errors?.pattern">用户名不合法！</ng-container>
        <ng-container *ngIf="i.errors?.msg">{{i.errors?.msg}}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="'请输入密码！'">
      <nz-input-group
        nzPrefixIcon="lock"
        nzSize="large"
        nz-popover
        nzPopoverPlacement="right"
        nzPopoverTrigger="focus"
        [(nzPopoverVisible)]="visible"
        nzPopoverOverlayClassName="register-password-cdk"
        [nzPopoverOverlayStyle]="{ 'width.px': 240 }"
        [nzPopoverContent]="pwdCdkTpl"
      >
        <input nz-input type="password" formControlName="password" placeholder="密码" />
      </nz-input-group>
      <ng-template #pwdCdkTpl>
        <div style="padding: 4px 0">
          <ng-container [ngSwitch]="status">
            <div *ngSwitchCase="'ok'" class="success">强度：强</div>
            <div *ngSwitchCase="'pass'" class="warning">强度：中</div>
            <div *ngSwitchDefault class="error">强度：太短</div>
          </ng-container>
          <div class="progress-{{ status }}">
            <nz-progress
              [nzPercent]="progress"
              [nzStatus]="passwordProgressMap[status]"
              [nzStrokeWidth]="6"
              [nzShowInfo]="false"
            ></nz-progress>
          </div>
          <p class="mt-sm">请至少输入 6 个字符。请不要使用容易被猜到的密码。</p>
        </div>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="confirmErrorTip">
      <nz-input-group nzSize="large" nzPrefixIcon="lock">
        <input nz-input type="password" formControlName="confirm" placeholder="确认密码" />
      </nz-input-group>
      <ng-template #confirmErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">请确认密码！</ng-container>
        <ng-container *ngIf="i.errors?.msg">两次输入的密码不匹配!</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

<!--  <nz-form-item>-->
<!--    <nz-form-control [nzErrorTip]="mobileErrorTip">-->
<!--      <nz-input-group nzSize="large" [nzAddOnBefore]="addOnBeforeTemplate">-->
<!--        <ng-template #addOnBeforeTemplate>-->
<!--          <nz-select formControlName="mobilePrefix" style="width: 100px">-->
<!--            <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>-->
<!--            <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>-->
<!--          </nz-select>-->
<!--        </ng-template>-->
<!--        <input formControlName="mobile" nz-input placeholder="Phone number" />-->
<!--      </nz-input-group>-->
<!--      <ng-template #mobileErrorTip let-i>-->
<!--        <ng-container *ngIf="i.errors?.required">请输入手机号！</ng-container>-->
<!--        <ng-container *ngIf="i.errors?.pattern">手机号格式错误！</ng-container>-->
<!--      </ng-template>-->
<!--    </nz-form-control>-->
<!--  </nz-form-item>-->
  <nz-form-item>
    <nz-form-control [nzErrorTip]="captchaImgErrorTip">
      <nz-row [nzGutter]="8">
        <nz-col [nzSpan]="16">
          <nz-input-group nzSize="large" nzPrefixIcon="barcode">
            <input nz-input formControlName="captchaImg" placeholder="验证码" />
            <ng-template #captchaImgErrorTip let-i>
              <ng-container *ngIf="i.errors?.required">请输入验证码！</ng-container>
              <ng-container *ngIf="i.errors?.msg">{{i.errors?.msg}}</ng-container>
            </ng-template>
          </nz-input-group>
        </nz-col>
        <nz-col [nzSpan]="8">
          <img class="img-captcha" id="captchaImg"  src="" (click)="flashImgCaptcha()" />
        </nz-col>
      </nz-row>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="mailErrorTip">
      <nz-input-group nzSize="large" nzPrefixIcon="mail">
        <input nz-input formControlName="mail" placeholder="邮箱" (focusout)="checkEmail()"/>
      </nz-input-group>
      <ng-template #mailErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">请输入邮箱地址！</ng-container>
        <ng-container *ngIf="i.errors?.email">邮箱地址格式错误！</ng-container>
        <ng-container *ngIf="i.errors?.msg">{{i.errors?.msg}}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="mailCaptchaErrorTip">
      <nz-row [nzGutter]="8">
        <nz-col [nzSpan]="16">
          <nz-input-group nzSize="large" nzPrefixIcon="message">
            <input nz-input formControlName="captchaMail" placeholder="邮箱验证码" />
            <ng-template #mailCaptchaErrorTip let-i>
              <ng-container *ngIf="i.errors?.required">请输入邮箱地址！</ng-container>
              <ng-container *ngIf="i.errors?.msg">{{i.errors?.msg}}</ng-container>
            </ng-template>
          </nz-input-group>
        </nz-col>
        <nz-col [nzSpan]="8">
          <button type="button" nz-button nzSize="large" (click)="getEmailCaptcha()" [disabled]="count > 0" nzBlock [nzLoading]="loading">
            {{ count ? count + 's' : ('邮箱验证') }}
          </button>
        </nz-col>
      </nz-row>
      <nz-alert *ngIf="isSendMail" nzType="success" nzShowIcon nzMessage="验证码已经发往您的邮箱！"></nz-alert>

    </nz-form-control>
  </nz-form-item>
  <nz-form-item>

      <label nz-checkbox formControlName="remember">同意<a>《云盘用户协议》</a>及<a>《隐私协议》</a></label>

  </nz-form-item>
  <nz-form-item>
    <button nz-button nzType="primary" nzSize="large" type="submit" [nzLoading]="loading" class="submit">
      注册
    </button>
    <a class="login" style="margin-left: 10px" routerLink="/user/login">使用已有账户登录</a>
  </nz-form-item>
</form>
